<template>
  <div class="app-container">
    <el-form :inline="true" :model="query" size="small">
      <el-form-item label="学员姓名">
        <el-input v-model="query.studentName" placeholder="学员姓名" clearable />
      </el-form-item>
      <el-form-item label="试听时间">
        <el-date-picker
          v-model="filter.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="选择课程顾问">
        <el-select v-model="query.merchantOpId" placeholder="选择课程顾问" clearable>
          <el-option v-for="o in advisors" :label="o.label" :value="o.value" :key="o.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="query.showClose" label="显示已结束" border @change="init"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="toQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%;">
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column label="试听学员">
        <template slot-scope="scope">
          <router-link :to="`/customer/detail/${scope.row.merchantCustomerId}`">
            <el-button type="text">{{ scope.row.studentName }}</el-button>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="试听课程"/>
      <el-table-column prop="typeName" label="试听课类型"/> 
      <el-table-column prop="opName" label="课程顾问"/>
      <el-table-column prop="merchantCustomerName" label="客户姓名" />
      <el-table-column prop="teacherName" label="安排老师" />
      <el-table-column label="试听时间">
        <template slot-scope="scope">
          {{ scope.row.listenDate | formatDate('yyyy-MM-dd hh:mm') }}
        </template>
      </el-table-column>
      <el-table-column prop="stateName" label="状态"/>
      <el-table-column prop="feedback" label="试听反馈">
        <template slot-scope="scope">
          {{ scope.row.feedback.slice(0, 30) }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期">
        <template slot-scope="scope">
          {{ scope.row.createdAt | formatDate('yyyy-MM-dd') }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button type="text" @click="handleArrange(scope.row.listenId)">排课</el-button>
          <em class="block-col"/>
          <el-button type="text" @click="handleFeedback(scope.row.listenId)">反馈</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

    <!-- 安排试听课 -->
    <el-dialog :visible.sync="arrangeDlgVisiable" title="安排试听课" width="600px">
      <el-form ref="arrangeForm" :model="arrangeForm" :rules="arrangeRule" label-width="100px">
        <el-row>
          <el-form-item label="上课老师" prop="teacherId">
            <el-select v-model="arrangeForm.teacherId" placeholder="选择课程顾问" clearable>
              <el-option v-for="o in teachers" :label="o.label" :value="o.value" :key="o.value" />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="上课时间" prop="listenDate">
            <el-date-picker
              v-model="arrangeForm.listenDate"
              type="datetime"
              format="yyyy-MM-dd HH:mm"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="arrangeDlgVisiable = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitArrange">确认</el-button>
      </div>
    </el-dialog>

    <!-- 试听课反馈 -->
    <el-dialog :visible.sync="feedbackDlgVisiable" title="试听课反馈" width='600px'>
      <el-form ref="feedbackForm" :model="feedbackForm" :rules="feedbackRule" label-width="100px">
        <el-row>
          <el-form-item label="上课反馈" prop="feedback">
            <el-input v-model="feedbackForm.feedback" type="textarea" :rows="6" placeholder="请填写上课效果反馈"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="feedbackDlgVisiable = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitFeedback">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listAdvisorOperators } from '@/api/account'
import { getTeacherListOptions } from '@/api/teacher'
import { getCustomerListen, submitCustomerListen, submitListenFeedback } from '@/api/customer'
import initData from '@/mixins/initData'

export default {
  mixins: [initData],
  data() {
    return {
      query: {},
      filter: {
        date: []
      },
      advisors: [],
      teachers: [],
      loading: false,
      arrangeDlgVisiable: false,
      arrangeForm: {
        listenId: null,
        teacherId: null,
        listenDate: ''
      },
      arrangeRule: {
        teacherId: [{ required: true, message: '请选择上课老师', trigger: 'blur' }],
        listenDate: [{ required: true, message: '请输入上课时间', trigger: 'blur' }]
      },
      feedbackDlgVisiable: false,
      feedbackForm: {
        listenId: null,
        feedback: ''
      },
      feedbackRule: {
        feedback: [{ required: true, message: '请输入试听课反馈', trigger: 'blur' }]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    }),
    listAdvisorOperators().then(res => {
      this.advisors = res.data
    }),
    getTeacherListOptions().then(res => {
      this.teachers = res.data
    })
  },
  methods: {
    beforeInit() {
      this.url = 'merchant/listen/list'
      this.params = {
        page: this.page,
        size: this.size
      }
      this.params['studentName']  = this.query.studentName
      if (this.filter.date != '' && this.filter.date != null) {
        this.params['date'] = this.filter.date.join(',')
      }
      this.params['merchantOpId'] = this.query.merchantOpId
      this.params['showClose']    = this.query.showClose
      return true
    },
    toQuery() {
      this.page = 1
      this.init()
    },
    submitArrange() {
      this.$refs.arrangeForm.validate(valid => {
        if (valid) {
          this.loading = true
          submitCustomerListen(this.arrangeForm).then(() => {
            this.$message({
              message: '排课更新成功',
              type: 'success'
            })
          }).finally(() => {
            this.loading = false
            this.arrangeDlgVisiable = false
            this.init()
          })
        }
      })
    },
    submitFeedback() {
      this.$refs.feedbackForm.validate(valid => {
        if (valid) {
          this.loading = true
          submitListenFeedback(this.feedbackForm).then(() => {
            this.$message({
              message: '反馈提交成功',
              type: 'success'
            });
          }).finally(() => {
            this.loading = false
            this.feedbackDlgVisiable = false
            this.init()
          })
        }
      })
    },
    handleArrange(listenId) {
      this.arrangeDlgVisiable = true
      if (listenId) {
        this.arrangeForm.listenId = listenId
        getCustomerListen(listenId).then(res => {
          this.arrangeForm.teacherId = res.data.teacherId
          this.arrangeForm.listenDate = res.data.listenDate
        })
      }
    },
    handleFeedback(listenId) {
      this.feedbackDlgVisiable = true
      if (listenId) {
        this.feedbackForm.listenId = listenId
        getCustomerListen(listenId).then(res => {
          this.feedbackForm.feedback = res.data.feedback
        })
      }
    }
  }
}
</script>

<style scoped>
.el-checkbox.is-bordered.el-checkbox--small {
  padding: 7px 15px 7px 10px;
}
</style>
